<script setup>
import { onBeforeUnmount, ref, onBeforeMount } from 'vue'
import { useStore } from 'vuex'
import isPhone from '@/utils/isPhone'

import { ElMessage } from 'element-plus'
import { EaseChatClient } from '@/IM/initwebsdk'
import NavBar from '@/views/Chat/components/NavBar'
import { messageType } from '@/constant'
import router from '@/router'

// /* CallKit */
// import EaseCallKit from '@/components/EaseCallKit'
import { useCallKitEvent } from '@/components/EaseCallKit/hooks'
/* store */
const store = useStore()
/* constants */
const { CHAT_TYPE } = messageType
onBeforeMount(() => {
    const userInfo = window.localStorage.getItem('EASEIM_loginUser')
    console.log('哈哈哈哈')
    setTimeout(async () => {
        const { messages } = await store.dispatch('getHistoryMessage', {
            chatType: 'singleChat',
            id: '18',
            cursor: -1
        })
        console.log(messages,'hhh******************')
        router.push('/conversation')
    }, 1500)
    if (userInfo) return
    // 获取当前页面的URL
    const url = new URL(window.location)

    // 使用URLSearchParams解析查询参数
    const params = new URLSearchParams(url.search)
    const token = params.get('token')
    const user = params.get('user')
    console.log(token, user, '地址栏的参数')
    EaseChatClient.open({
        user: user.toLowerCase(),
        accessToken: token
    })
    window.localStorage.setItem(
        'EASEIM_loginUser',
        JSON.stringify({
            user: user.toLowerCase(),
            accessToken: token
        })
    )
    // 获取指定的参数值
})
/**
 * 此处为Callkit中对外暴露的其内部对外抛出的事件通知，
 * 可通过引入useChannelEvent，订阅其通知处理一些UI层面的提示。
 */
const {
    EVENT_NAME,
    CALLKIT_EVENT_CODE,
    SUB_CHANNEL_EVENT,
    UN_SUB_CHANNEL_ENENT
} = useCallKitEvent()
SUB_CHANNEL_EVENT(EVENT_NAME, (param) => {
    console.log('%c>>>>>>订阅事件触发', 'color:blue', param)
    /* 
事件对外抛出包含有对应的事件type，type/code 可以自行判断处理，ext字段内有对外传出的事件中文描述，可自行选择是否使用。
*/
    const { type, ext, callType, eventHxId } = param
    if (
        type.code === CALLKIT_EVENT_CODE.CALLEE_REFUSE ||
        type.code === CALLKIT_EVENT_CODE.CALLEE_BUSY ||
        type.code === CALLKIT_EVENT_CODE.OTHER_HANDLE
    ) {
        ElMessage({
            type: 'error',
            message: ext.message,
            center: true
        })
        const params = {
            from: EaseChatClient.user,
            to: eventHxId,
            chatType: callType === 2 ? CHAT_TYPE.GROUP : CHAT_TYPE.SINGLE,
            msg: ext.message
        }
        store.dispatch('createInformMessage', { ...params })
    } else if (
        type.code === CALLKIT_EVENT_CODE.NOT_HAVE_MICROPHONE ||
        type.code === CALLKIT_EVENT_CODE.NOT_HAVE_CAMERA
    ) {
        ElMessage({
            type: 'warning',
            message: ext.message,
            center: true
        })
    } else if (eventHxId) {
        const params = {
            from: EaseChatClient.user,
            to: eventHxId,
            chatType: callType === 2 ? CHAT_TYPE.GROUP : CHAT_TYPE.SINGLE,
            msg: ext.message
        }
        store.dispatch('createInformMessage', { ...params })
    }
})

onBeforeUnmount(() => {
    UN_SUB_CHANNEL_ENENT(EVENT_NAME)
})
</script>
<template>
  <div class="chat_container_h5 fill_div" ref="appContainerH5" v-if="isPhone">
    <router-view>
    </router-view>
  </div>
  <div class="app-container" v-else>
    <el-container class="chat_container">
      <el-aside class="chat_nav_bar" width="72px">
        <NavBar />
      </el-aside>
      <el-main class="chat_main_box">
        <router-view>
        </router-view>
      </el-main>
      <!-- <EaseCallKit :EaseIM="EaseIM" :connectionName="'conn'" /> -->
    </el-container>
  </div>

</template>

<style lang="scss" scoped>
.app-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: url('@/assets/images/web-demo-base.png');
    background-size: cover;
    backdrop-filter: blur(5px);
    .chat_container {
        width: 85%;
        height: 95%;
        background: #fff;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin: auto auto;
        border-radius: 5px;

        .chat_nav_bar {
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 5px 0 0 5px;
            width: 80px;
            background: #262626;
            overflow: hidden;
        }
        /* 当屏幕宽度小于 600px 时 */
        @media screen and (max-width: 600px) {
            .chat_nav_bar {
                display: none;
            }
        }

        .chat_main_box {
            // height: 100%;
            // overflow: hidden;
            padding: 0;
        }
    }
}
</style>
